<template>
	<view class="card-wrap">
		<view class="news-wrap" v-if="styleType == 1">
			<u-waterfall v-model="newsList">
				<template v-slot:left="{leftList}">
					<view class="water-list" v-for="(item, index) in leftList" :key="index"
						@click="$Router.push({ path: '/pages/news/news', query: { id: item.id } })">
						<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index">
						</u-lazy-load>
						<view class="water-title">{{item.title}}</view>
						<view class="water-tag">
							<view class="water-tag-video" v-if="item.eyes == 'on'">
								视频
							</view>
						</view>
					</view>
				</template>
				<template v-slot:right="{rightList}">
					<view class="water-list" v-for="(item, index) in rightList" :key="index">
						<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index">
						</u-lazy-load>
						<view class="water-title">{{item.title}}</view>
						<view class="water-tag">
							<view class="water-tag-video" v-if="item.eyes == 'on'">
								视频
							</view>
						</view>
					</view>
				</template>
			</u-waterfall>
		</view>
		<!--卡片-->
		<view class="card-wrap u-p-30">
			<view v-for="(item, index) in newsList" :key="index">
				<!--缩略图左-->
				<view class="thumb u-flex u-col-top u-m-b-40 list-box" v-if="styleType == 2">
					<image :src="item.image" mode="aspectFill" v-if="thumb" :lazy-load="true" :style="{ 
					  		height: thumbHeight + 'rpx',
					  		width: thumbWidth + 'rpx', 
					  		borderRadius: thumbCircle ? '100rpx' : '6rpx' 
					  	}"></image>
					<view class="card-right-box">
						<view class="title u-line-1 bold u-m-l-40">{{item.title}}</view>
						<view class="intro-box u-m-l-40 u-line-2 u-tips-color u-m-t-20">{{item.description}}</view>
						<view v-if="showFoot" class="mini-foot u-m-l-40 u-m-t-20">
							<u-icon name="eye" color="#909399"></u-icon>
							<text class="u-m-l-6 u-tips-color u-font-13">{{item.views}}</text>
						</view>
					</view>
				</view>
				<!--缩略图右-->
				<view class="thumb u-flex u-col-top u-m-b-40" v-if="styleType == 3">
					<view class="card-left-box">
						<view class="title u-line-1 bold">{{item.title}}</view>
						<view class="intro-box u-line-2 u-m-t-20 u-tips-color">{{item.description}}</view>
						<view v-if="showFoot" class="mini-foot  u-m-t-20">
							<u-icon name="eye" color="#909399"></u-icon>
							<text class="u-m-l-6 u-tips-color u-font-13">{{item.views}}</text>
						</view>
					</view>
					<image :src="item.image" mode="aspectFill" v-if="thumb" :lazy-load="true" :style="{
					       	height: thumbHeight + 'rpx', 
					       	width: thumbWidth + 'rpx', 
					       	borderRadius: thumbCircle ? '100rpx' : '6rpx' 
					       }"></image>
				</view>
				<!--大图，标题上-->
				<view class="thumb-inner u-m-b-40" v-if="styleType == 4">
					<u-row gutter="16" justify="center">
						<u-col span="12">
							<view class="title u-line-1 u-m-b-15 bold">{{item.title}}</view>
							<view class="u-tips-color u-line-2 u-m-b-20 ds-width">{{item.description}}</view>
							<image class="u-m-b-20" :src="item.image" mode="widthFix" v-if="thumb" :lazy-load="true"
								:style="{
									borderRadius: thumbCircle ? '100rpx' : '6rpx' 
								}"></image>
							<view v-if="showFoot" class="mini-foot">
								<u-icon name="eye" color="#909399"></u-icon>
								<text class="u-m-l-6 u-tips-color u-font-13">{{item.views}}</text>
							</view>
						</u-col>
					</u-row>
				</view>
				<!--大图，标题下-->
				<view class="thumb-out u-m-b-40" v-if="styleType == 5">
					<image class="" :src="item.image" mode="widthFix" v-if="thumb" :lazy-load="true" :style="{
						
							borderRadius: thumbCircle ? '100rpx' : '6rpx' 
						}"></image>
					<view class="title u-line-1 bold">{{item.title}}</view>
					<view class="u-line-2 u-tips-color u-m-b-20 u-m-t-20 ds-width">{{item.description}}</view>
					<view v-if="showFoot" class="mini-foot ">
						<u-icon name="eye" color="#909399"></u-icon>
						<text class="u-m-l-6 u-tips-color u-font-13">{{item.views}}</text>
					</view>
				</view>
				<!--无图-->
				<view class="u-m-b-40" v-if="styleType == 6">
					<text class="none-img u-line-1 bold">{{item.title}}</text>
					<view v-if="showFoot" class="mini-foot  u-m-t-20">
						<u-icon name="eye" color="#909399"></u-icon>
						<text class="u-m-l-6 u-tips-color u-font-13">{{item.views}}</text>
					</view>
				</view>
				
			</view>
			<scroll-view  scroll-x class="tabs-content" enable-flex scroll-with-animation
				:scroll-left="scrollLeft">
				<view class="u-flex u-row-cetner u-flex-1 u-col-center">
					<view class="tab-item u-flex-col u-col-center u-row-center" v-for="(item, index) in newsList"
						:key="index" >
						<!--滑动卡片-->
						<view v-if="styleType == 7">
							<image :src="item.image" :lazy-load="true"
							    mode="aspectFill"
								v-if="thumb"
								@click="$Router.push({ path: '/pages/news/news', query: { id: item.id } })"
								
							    :style="{
							        height: thumbHeight + 'rpx', 
							        width: thumbWidth + 'rpx', 
							        borderRadius: thumbCircle ? '100rpx' : '6rpx' 
							    }" 
							></image>
							<view class="tab-title u-line-1">{{item.title}}</view>
						</view>
					
					</view>
				</view> 
			</scroll-view>
		</view>
		<u-loadmore v-if="newsList.length && styleType=='1' || styleType=='2' || styleType=='3' || styleType=='4' || styleType=='5'|| styleType=='6'"
		   height="80rpx" 
		   :status="loadStatus" 
		   icon-type="flower" 
		   color="#ccc" />
	</view>
</template>

<script>
	/**
	 * 自定义文章分类卡片
	 * @property {Object} detail - 直播信息
	 */
	let systemInfo = uni.getSystemInfoSync();
	// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
	let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
	// #endif
	export default {
		components: {},
		data() {
			return {
				isLoading: true,
				loadStatus: 'loadmore', //loadmore:加载前的状态，loading:加载中的状态，nomore:没有更多的状态
				lastPage: 1,
				currentPage: 1,
				newsList: [],
				loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
				scrollLeft: 0,
			};
		},
		props: {
			//卡片类型
			styleType: {
				type: [Number, String],
				default: 1
			},
			// 标题字体大小，单位rpx
			titleSize: {
				type: [Number, String],
				default: '30'
			},
			// 副标题字体大小，单位rpx
			subTitleSize: {
				type: [Number, String],
				default: '26'
			},
			// card卡片的圆角
			borderRadius: {
				type: [Number, String],
				default: '16'
			},
			// 底部自定义样式，对象形式
			footStyle: {
				type: Object,
				default () {
					return {};
				}
			},
			// 标题左边的缩略图
			thumb: {
				type: String,
				default: ''
			},

			// 缩略图宽高，单位rpx
			thumbWidth: {
				type: [String, Number],
				default: '60'
			},
			//缩略图高度
			thumbHeight: {
				type: [String, Number],
				default: '60'
			},
			//滚动图高度
			scrollHeight: {
				type: [String, Number],
				default: '380'
			},
			//滚动图宽度
			scrollWidth: {
				type: [String, Number],
				default: '240'
			},
			// 缩略图是否为圆形
			thumbCircle: {
				type: Boolean,
				default: false
			},
			// 是否显示尾部
			showFoot: {
				type: Boolean,
				default: true
			},
			// 卡片外围阴影，字符串形式
			boxShadow: {
				type: String,
				default: 'none'
			},
			tabsList: {
				type: Array,
				default: () => []
			},
			enable: {
				type: Boolean,
				default: false
			}

		},
		created() {

			this.getNewsList();
			// 触底监听
			uni.$on('uOnReachBottom', data => {
				if (this.currentPage < this.lastPage) {
					this.currentPage += 1;
					this.getNewsList();
				}
			});
		},
		computed: {

		},
		methods: {
			//获取文章
			getNewsList() {
				let that = this;
				that.isLoading = true;
				that.loadStatus = 'loading';
				that.$http('news.lists', {
					page: that.currentPage
				}).then(res => {
					that.isLoading = false;
					if (res.code === 1) {
						that.newsList = [...that.newsList, ...res.data.data];
						that.isEmpty = !that.newsList.length;
						that.lastPage = res.data.last_page;
						that.loadStatus = that.currentPage < res.data.last_page ? 'loadmore' : 'nomore';
					}
				});
			},
	
			// 加载更多
			loadMore() {
				if (this.currentPage < this.lastPage) {
					this.currentPage += 1;
					this.getGrouponList();
				}
			},





		}
	};
</script>

<style lang="scss" scoped>
	.card-wrap {
		background-color: #FFFFFF;
	}

	/*瀑布流*/
	.water-list {
		border-radius: 8rpx;
		margin: 5px;
		background-color: #FFFFFF;
		padding: 8px;
		position: relative;
	}

	.water-tag {
		display: flex;
		margin-top: 5px;
	}

	.water-tag-video {
		background-color: $u-type-error;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 4rpx 14rpx;
		border-radius: 50rpx;
		font-size: 20rpx;
		line-height: 1;
	}

	.water-title {
		font-size: 30rpx;
		margin-top: 10px;
		color: $u-main-color;
	}

	/*滑动卡片*/
   .tabs-content {
   		white-space: nowrap;
   
   		.tab-item {
   			min-height: 90rpx;
   			display: inline-block;
   			margin: 0 10rpx;
   			padding: 0 20rpx;
   
   			.tab-title {
   				font-size: 32rpx;
   				font-weight: 600;
   				color: #333333;
				width: 160rpx;
   			}
   
   		}
   	}
	/**/
	.news-box {
		display: inline-block;
		width: 100%;
		height: 100%;
	}

	.none-img {
		line-height: 1.9;
	}

	.intro-box {
		width: 380rpx;
	}

	.ds-width {
		width: 320px;
	}

	.card-right-box {
		width: 200px;
	}

	.card-left-box {
		width: 260px;
	}
</style>
